;(function () {
	var customFileds = {
		template:`
			<div>
				<div class="edit-custom-fileds-conntinaer" v-if="mode == 'create'">
					<div class="color-gray mb-10">自定义信息</div>
					<div class="fields-container mb-20" v-for="(item, index) in resData">
						<p class="color-666" v-if="delHtmlTag(item.firstLevelTitle.value).length && item.type != 'line'" style="margin-bottom: 10px;" v-html="item.firstLevelTitle.value"></p>
						<div class="">
							<div class="color-999 dy-flex mb-10" v-if="item.type != 'line'">
								<span class="required" v-if="item.requiredFlag == 'Y'">*</span>
								<div v-html="item.secondLevelTitle.value"></div>：							
							</div>
							<div class="dy-fx-1">						
								<input type="text" :placeholder="item.placeholder || '请输入'" class="form-control" style="width: 310px;" v-if="textTypeAll.indexOf(item.type) > -1" v-model="item.value">
								<textarea rows="4" :placeholder="item.placeholder || '请输入'" class="form-control" v-if="item.type == 'area'" v-model="item.value"></textarea>
								<hl-radio :data="item.radioList" v-if="item.type == 'radio'" :inline="false" v-model="item.value"></hl-radio>
								<hl-checkbox :data="item.checkboxList" v-if="item.type == 'checkbox'" :inline="false" v-model="item.value"></hl-checkbox>
								<hl-select :data="item.selectList" width="310" type="primary" v-if="item.type == 'select'" v-model="item.value"></hl-select>
								<div class="border-b pb-20" v-if="item.type == 'line'"></div>
								<web-calendar v-if="item.type == 'time' || item.type == 'date'" type="primary" width="310" v-model="item.value"></web-calendar>
								<div v-if="item.type == 'file'">
									<ul>
										<li v-for="(file, fileIndex) in item.value" class="dy-flex" style="height:34px;align-items: center;">
											<span>{{fileIndex+1}}: {{file.name}}</span>
											<span class="el-icon-delete ml-24" @click.prevent="remove(file, index, fileIndex)"></span>
										</li>
									</ul>
									<file-upload
										:maximum="item.file.isNum ? 999 : item.file.num"
										:size="item.file.isSize ? (999*1024*1024) : (item.file.size*1024*1024)"
									  v-model="item.value"
									  :post-action="uploadsrc"
									  @input-file="inputFile"
									>
										<div class="border el-icon-upload2" style="padding:8px 10px;marginTop:8px;"><span class="ml-10">上传</span></div>
									</file-upload>									
									<div class="mt-5 color-999 font-12" >支持扩展名：.rar .zip .doc .docx .pdf .jpg</div>
								</div>						
							</div>
						</div>				
					</div>
				</div>
				<div class="detail-custom-fileds-conntinaer" v-if="mode == 'detail'">
					<div class="color-gray mb-10">自定义信息</div>
					<div class="fields-container mb-10" v-for="(item, index) in resData">
						<div class="border-b" v-if="item.type == 'line'"></div>
						<div v-if="item.type != 'line'">
							<p class="color-666" v-if="delHtmlTag(item.firstLevelTitle.value).length" style="margin-bottom: 10px;" v-html="item.firstLevelTitle.value"></p>
							<div class="line-height-34" :class="{'dy-flex':  ['file', 'area'].indexOf(item.type) == -1}">
								<div class="color-999 dy-flex">
									<div v-html="item.secondLevelTitle.value"></div>：							
								</div>
								<div class="dy-fx-1">						
									<div class="file" v-if="item.type == 'file'">
										<ul style="display:block;">
											<li class="clearfix border-b" style="display:block;padding:14px 0;" v-for="file in item.value">
												<p class="icon-Nav-contract-file file-name pull-left"><span>{{file.name}}</span></p>
												<p class=" file-btn dy-flex opera-but pull-right">												
													<a class="icon-GM-preview" @click="previewImage(file.url)"><b>预览</b></a> 
													<span class="block-D-P-D"></span> 
													<a :href="file.url" :download="file.name" class="icon-Gm-download"><b>下载</b></a>
												</p>
											</li>
										</ul>
									</div>
									<div class="select-box" v-if="selectTypes.indexOf(item.type) > -1">{{item.value.join(';')}}</div>
									<div class="other" v-if="otherTyps.indexOf(item.type) > -1" :style="{lineHeight: item.type == 'area' ? '24px' : '34px'}">{{item.value || '--'}}</div>
								</div>
							</div>
						</div>				
					</div>
					
				</div>
			</div>			
		`,
		model:{
		  prop: 'selected',
		  event:'on-change'
		},
		props:{
		  data:{
		    type:Array,
		    default:() => []
		  },
		  selected:{
		    type:Array,
		    default:() => []
		  },
		  mode: {
		    type:String,
		    default: 'create'
		  },
			type: {
				type: String,
				default: ''
			}			
		},
		watch: {
			data (val) {		
				console.log(val)
				this.tmpData = JSON.parse(JSON.stringify(val))
				this.get_page_customize_component_template()
			},
			//每次数据发生变化返回结果
			resData: {
				deep: true,
				handler:function (val) {					
					this.$emit('on-change', val)
				}
			}
		},		
		data () {
			return {
				uploadsrc: uploadUrl,
				textTypeAll: ['text', 'mobile', 'email', 'phone'],
				flexTypes: ['text', 'mobile', 'email', 'phone', 'select', 'time', 'date'],
				otherTyps: ['text', 'area', 'mobile', 'email', 'phone', 'time', 'date'],
				selectTypes: ['radio', 'select', 'checkbox'],
				tmpData: [],
				resData: []
			}
		},
		methods: {
			remove(file, i, fi) {
				this.resData[i].value.splice(fi, 1)
			},
			inputFile: function (newFile, oldFile) {
				if (!newFile) newFile = {active: true}
				newFile.active = true
			  if (newFile && oldFile && newFile.active && oldFile.active) {					
			    // 获得相应数据
			    if (newFile.xhr) {						
			      //  获得响应状态码
						if (newFile.response.url) {
							newFile.active = false
						}
			    }
			  }				
			},			
			//预览文件
			previewImage: function(url) {
				var imageExt = ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG'];
				var pdfExt = ['pdf', 'PDF'];
				var officeExt = ['docx', 'doc', 'xlsx', 'xls', 'xlt']
				var imageFlag = false;
				var pdfFlag = false;
				var officeFlag = false;

				imageExt.forEach((e, i) => {
					if (url.indexOf(e) !== -1) imageFlag = true;
				})

				if (imageFlag) {
					$.imageShow([url])
					return
				}
				pdfExt.forEach((e, i) => {
					if (url.indexOf(e) !== -1) pdfFlag = true;
				})
				if (pdfFlag) {
					$.previewPDF(url)
					return
				}

				officeExt.forEach((e, i) => {
					if (url.indexOf(e) !== -1) officeFlag = true
				})
				if (officeFlag) {
					$.previewOffice(url)
					return
				}
				hl.toast('暂不支持该格式')
			},
			//去除html标签
			delHtmlTag(str) {
				var reg = RegExp("<[^>]+>", "g");
				var result = str.replace(reg, '');
				return result; 
			},
			
			//匹配code返回name
			machcodeResname (code, list) {
				let name = [];
				list.map(item => {
					code.map(item1 => {
						if (item1 == item.code) {
							name.push(item.name)
						}
					})
				})
				return name
			},
			
			//自定义字段模板详情
			get_page_customize_component_template () {							
				let isArr = ['select', 'radio', 'checkbox', 'file']
				hlhttp.get({
					url: 'page_customize_component_template',
					data: {type: this.type},
					success: (data) => {
						this.resData = [];
						
						data.pageCustomizeComponent.map(item => {
							item.file.isNum = item.file.num > 0 ? false : true
							item.file.isSize= item.file.size > 0 ? false : true;
							if (item.type == 'select' || item.type == 'radio' || item.type == 'checkbox') {
								item.value = item.defaultVal
							}	
						})
						if (this.mode == 'detail') {							
							this.tmpData.map((item, index) => {								
								data.pageCustomizeComponent.map(item1 => {
									if (item.componentCode == item1.code) {
										if (isArr.indexOf(item1.type) == -1) {
											item1.value = item.property;
										}
										if (item1.type == 'file') {
											item1.value = JSON.parse(item.property);
										}
										if (item1.type == 'select') {
											item1.value = this.machcodeResname(JSON.parse(item.property), item1.selectList);
										}
										if (item1.type == 'radio') {
											item1.value = this.machcodeResname(JSON.parse(item.property), item1.radioList);
										}
										if (item1.type == 'checkbox') {
											item1.value = this.machcodeResname(JSON.parse(item.property), item1.checkboxList);
										}
										item1.flag = true;										
									}							
								})
							})
							data.pageCustomizeComponent.map(item1 => {
								if (item1.flag) {									
									this.resData.push(item1)
								}							
							})
							return
						};
						
						if (!this.tmpData.length) {						
							data.pageCustomizeComponent.map(item1 => {
								if (item1.valid == '1') {								
									this.resData.push(item1)
								}							
							})													
							return
						}						
						
						data.pageCustomizeComponent.map(item1 => {
							this.tmpData.map(item => {
								if (item.componentCode == item1.code) {
									item1.value = isArr.indexOf(item1.type) > -1 ? JSON.parse(item.property) : item.property																	
								}
							})							
						})												
						
						data.pageCustomizeComponent.map(item1 => {
							if (item1.valid == '1') {								
								this.resData.push(item1)
							}							
						})					
					}
				})
			},
		},
		mounted() {			
			if (this.type && !this.tmpData.length && this.mode != 'detail') {				
				this.get_page_customize_component_template()
			}
		}
	}
	
	Vue.component('hl-custom-fileds', customFileds)
} ())